<template>
  <div class="dataCard">
    <div class="data" ref="dataRef">{{ props.num }}</div>
    <div class="text" >{{ props.label }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "dataCard",
});
</script>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
const props = defineProps(["num", "label",'color']);
const dataRef=ref()
onMounted(() => {
  if(props.color) dataRef.value.style.color=`${props.color}`
});

</script>
<style scoped>
.dataCard {
  background-color: rgba(2, 10, 45, 0.5);
  display: inline-block;
  text-align: center;
  display: flex;
  flex-direction: column;
  height:50px; /* 设置为纵向布局 */
  justify-content: space-around;
  padding: 0px 20px;
  flex-shrink: 1;
  
  .data {
    color: #338ab5;
    font-size: 14px;
    margin: 5px 0px;
  }
  .text {
    color: #e8eaf1;
    font-size: 12px;
    margin: 5px 0px;
  }
}
</style>
